<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备管理系统</title>

    <!--    引入BootStrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!--    不使用官网的，可能版本对不上，导致无法获取到BootStrap-->
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">-->
</head>
<body>


<div class="container py-3">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">设备管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" th:href="@{/}"> 设备列表<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" th:href="@{/department}"> 部门列表<span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <!--            添加搜索框-->
            <form class="form-inline my-2 my-lg-0"
                  th:action="@{/page/{pageNo}(pageNo=${currentPage},sortField=${'id'},sortDir=${'asc'})}"
                  th:method="get">
                <input name="pageNo" type="hidden" value="1"/>
                <input name="sortField" type="hidden" value="id"/>
                <input name="sortDir" type="hidden" value="asc"/>
                <input class="form-control mr-sm-2" name="departmentID" type="search" placeholder="通过部门id查设备"
                       aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>
    <h1 class="text-center mb-2">部门列表</h1>
    <div class="text-right mb-3">
        <a th:href="@{/addDepartment}" class="btn btn-info">添加部门</a>
    </div>
    <table class="table table-striped table-responsive-md table-bordered table-hover">
        <thead class="table-dark">
        <tr>
            <th>
                <!--                添加超链接，使其能跳转页面，从而达到排序的效果-->
                <a th:href="@{'/department/page/' + ${currentPage} + '?sortField=id&sortDir=' + ${reverseSortDir}}">ID</a>
            </th>
            <th>
                <a th:href="@{'/department/page/' + ${currentPage} + '?sortField=name&sortDir=' + ${reverseSortDir}}">部门</a>
            </th>
            <th>
                <a th:href="@{'/department/page/' + ${currentPage} + '?sortField=id&sortDir=' + ${reverseSortDir}}">操作</a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="department : ${listDepartment}">
            <td th:text="${department.id}"></td>
            <td th:text="${department.name}"></td>
            <td>
                <a th:href="@{/updateDepartment/{id}(id=${department.id})}"
                   class="btn btn-sm btn-warning">更新部门信息</a>
            </td>
        </tr>
        </tbody>
    </table>

    <!--    分页制作-->
    <div th:if="${totalPages > 1}" class="mt-4">
        <nav aria-label="Page navigation example">
            <div class="col-sm-3">
                总设备数量: [[${totalItems}]]
            </div>
            <ul class="pagination justify-content-center">

                <li class="page-item"
                    th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                    <a class="page-link"
                       th:if="${currentPage > 1}"
                       th:href="@{'/department/page/' + ${currentPage - 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <span th:unless="${currentPage > 1}">
                    <a class="page-link disabled" aria-disabled="true" href="#" tabindex="-1"
                       aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                </span>
                </li>

                <span th:each="i: ${#numbers.sequence(1, totalPages)}">
                <li class="page-item"
                    th:classappend="${currentPage == i ? 'active' : ''}">
                    <a class="page-link"
                       th:if="${currentPage != i}"
                       th:href="@{'/department/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}"
                       th:text="${i}"></a>
                    <span th:unless="${currentPage != i}">
                        <a class="page-link disabled" href="#" tabindex="-1" aria-disabled="true"
                           th:text="${i}"></a>
                    </span>
                </li>
            </span>

                <li class="page-item"
                    th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
                    <a class="page-link"
                       th:if="${currentPage < totalPages}"
                       th:href="@{'/department/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <span th:unless="${currentPage < totalPages}">
                    <a class="page-link disabled" href="#" tabindex="-1" aria-disabled="true"
                       aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                </span>
                </li>

            </ul>
        </nav>
    </div>


</div>
</body>
</html>